<template>
  <div>
    <z-tree :tree-id="treeId"
            :nodes="treeNodes"
            :setting="treeSetting"
            :enable-right-menu="true"
            :edit-enable="true">
            <template v-slot:right-menu="props">
                <ul>
                    <li>新增类别</li>
                    <li>重命名</li>
                    <li>props.node.menuName</li>
                </ul>
            </template>
    </z-tree>

  </div>
</template>

<script>
  import zTree from '@/components/z-tree.vue'

  const res= {"status":0,"data":[{"menuId":101,"menuName":"位置管理","menuUrl":"101","menuPid":0,"menuOrder":1,"menuIcon":"fa fa-cube","menuState":0,"menuKey":"","menuLevel":1,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":0},{"menuId":102,"menuName":"微享逍客","menuUrl":"102","menuPid":0,"menuOrder":2,"menuIcon":"fa fa-reorder","menuState":0,"menuKey":"","menuLevel":1,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":0},{"menuId":10010,"menuName":"LOGO管理","menuUrl":"/logo/logo","menuPid":100,"menuOrder":10,"menuIcon":"","menuState":0,"menuKey":"","menuLevel":2,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":1},{"menuId":10110,"menuName":"二维码管理","menuUrl":"/location/qrCode","menuPid":101,"menuOrder":10,"menuIcon":"","menuState":0,"menuKey":"","menuLevel":2,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":0},{"menuId":10210,"menuName":"文章管理","menuUrl":"10210","menuPid":102,"menuOrder":10,"menuIcon":"","menuState":0,"menuKey":"","menuLevel":2,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":0},{"menuId":12010,"menuName":"业务审核","menuUrl":"12010","menuPid":120,"menuOrder":10,"menuIcon":"","menuState":0,"menuKey":"","menuLevel":2,"menuAuth":"","businessId":1,"menuType":2,"menuSelect":0},{"menuId":10011,"menuName":"角色菜单","menuUrl":"/system/role/role","menuPid":100,"menuOrder":11,"menuIcon":"","menuState":0,"menuKey":"","menuLevel":2,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":0},{"menuId":10111,"menuName":"活动管理","menuUrl":"10111","menuPid":101,"menuOrder":11,"menuIcon":"","menuState":0,"menuKey":"","menuLevel":2,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":0},{"menuId":12011,"menuName":"客户管理","menuUrl":"12011","menuPid":120,"menuOrder":11,"menuIcon":"","menuState":0,"menuKey":"","menuLevel":2,"menuAuth":"","businessId":1,"menuType":3,"menuSelect":0},{"menuId":10012,"menuName":"员工管理","menuUrl":"/system/role/accountNumber","menuPid":100,"menuOrder":12,"menuIcon":"","menuState":0,"menuKey":"","menuLevel":2,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":0},{"menuId":120,"menuName":"信用卡业务","menuUrl":"120","menuPid":0,"menuOrder":20,"menuIcon":"fa fa-reorder","menuState":0,"menuKey":"","menuLevel":1,"menuAuth":"","businessId":1,"menuType":1,"menuSelect":0},{"menuId":100,"menuName":"系统管理","menuUrl":"100","menuPid":0,"menuOrder":100,"menuIcon":"fa fa-users","menuState":0,"menuKey":"","menuLevel":1,"menuAuth":"","businessId":0,"menuType":0,"menuSelect":0}],"msg":"操作成功"};

  export default {
    components:{
      zTree
    },
    data() {
      return {
        treeId: 'treeObj',
        treeNodes: res.data,
        treeSetting: {
          check: {
            enable: true
          },
          view: {
            showLine: true
          },
          data: {
            simpleData: {
              enable: true,
              idKey: 'menuId',
              pIdKey: 'menuPid',
              rootPId: '0'
            },
            key: {
              name: 'menuName',
              title: 'menuName'
            },
            keep: {
              leaf: true,
              parent: true
            }
          },
          callback: {
          },
          edit: {
            enable: true, // 可编辑
            showRemoveBtn: false, // 显示删除按钮
            removeTitle: '删除节点',
            showRenameBtn: false, // 显示编辑按钮
            renameTitle: '编辑节点名称',
            drag: {
              autoExpandTrigger: false,
              isCopy: false,
              isMove: true,
              prev: true,
              next: true,
              inner: true,
              borderMax: 20,
              borderMin: -10,
              minMoveSize: 10,
              maxShowNodeNum: 10,
              autoOpenTime: 500
            }
          }
        }
      }
    },
    mounted() {
    },
    methods: {
    }
  }
</script>

<style>

</style>
